/* eslint-disable react-hooks/exhaustive-deps */
import {useState, useEffect} from 'react'
import { Tabs } from 'antd-mobile'
import './style.less'

const tab = [
    {
        name: '综合',
        type: 'synthesis'
    },
    {
        name: '新品',
        type: 'newProduct'
    },
    {
        name: '销量',
        type: 'salesVolume'
    },
    {
        name: '价格',
        type: 'price'
    }
]

const TabsList = props => {
    const {onTabsChange} = props
    const [price, setPrice] = useState(false)
    const [type, setType ] = useState('')
    const searchName = price ? 'asc' : 'desc'
    const list = tab.map(item => {
        return <Tabs.Tab key={item.type} title={item.name}/>
    })
    const onTabsChangeProps = (value) => {
        setPrice(!price)
        setType(value)
    }
    useEffect(()=> {
        onTabsChange({searchName, types: type})
    }, [type, price])
     return (
        <Tabs onChange={value => onTabsChangeProps(value)} className="tab-list">{list}</Tabs>
     )
}

export default TabsList